<template>
    <scroll-view class="maintenance-hall-list" scroll-y @scrolltolower="scroll" :refresher-triggered="triggered"
        :refresher-threshold="100" @refresherrestore="onRestore" refresher-enabled @refresherrefresh="onRefresh"
        :ower-threshold="0">
        <view class="maintenance-hall-list-item" :class="'type-' + item.approveStatus" v-for="(item, index) in data"
            :key="index">
            <view class="header">
                <view class="item-dt">
                    <view class="dt-l">
                        <p class="name u-line-1">{{ item.deviceNo }}</p>
                        <p class="name u-line-1">{{ item.deviceName }}</p>
                    </view>
                    <view class="dt-r">
                        <u-tag type="success" text="维修确认" v-if="navIndex == '0'"></u-tag>
                        <u-tag type="success" text="待分配" v-if="navIndex == '1'"></u-tag>
                        <u-tag type="success" text="升级中" v-if="navIndex == '8'"></u-tag>
                        <u-tag type="success" text="维修中" v-if="navIndex == '5'"></u-tag>
                        <u-tag type="success" text="待验收" v-if="navIndex == '6'"></u-tag>
                        <u-tag type="success" text="已结单" v-if="navIndex == '7'"></u-tag>
                        <u-tag type="success" text="已驳回" v-if="navIndex == '-1'"></u-tag>
                    </view>
                </view>
                <view class="type-list">
                    <view class="type-list-item" style="background-color: #fff1f0; color: #e03e55"
                        v-if="item.maintainGradeStr">{{ item.maintainGradeStr}}</view>
                    <view class="type-list-item" style="background-color: #f1f7fd; color: #187bde"
                        v-if="item.affectProductionFlagStr && item.affectProductionFlag === 0">
                        {{ item.affectProductionFlagStr }}
                    </view>
                    <view class="type-list-item" style="background-color: #f1f7fd; color: #187bde"
                        v-if="item.affectProductionFlagStr && item.affectProductionFlag === 1">
                        {{ item.affectProductionFlagStr }}
                    </view>
                    <view class="type-list-item" style="background-color: #f1f7fd; color:#e03e55"
                        v-if="item.affectProductionFlagStr && item.affectProductionFlag === 2">
                        {{ item.affectProductionFlagStr }}
                    </view>
                    <view class="type-list-item" style="background-color: #f1f7fd; color: #187bde"
                        v-if="item.workOrderGradeStr">
                        {{ item.workOrderGradeStr }}
                    </view>
                </view>
            </view>

            <view class="main-box">
                <view class="item-dd">
                    <text class="label">维修单号:</text>
                    <text class="value">{{ item.workOrderNo }}</text>
                </view>
                <view class="item-dd">
                    <text class="label">报修时间:</text>
                    <text class="value">{{ item.maintainApplyTime }}</text>
                </view>
                <view class="item-dd">
                    <text class="label">功能位置:</text>
                    <text class="value">{{ item.functionalLocationName }}</text>
                </view>
                <view class="item-dd">
                    <text class="label">故障现象:</text>
                    <text class="value">{{ item.faultMessage }}</text>
                </view>
				<view class="item-dd">
                    <text class="label">故障详情:</text>
                    <text class="value">{{ item.faultDetail }}</text>
                </view>
                <view class="item-dd">
                    <MyUpload v-model="item.attachmentDTOs" :disabled="true" :deletable="false"></MyUpload>
                </view>
            </view>

            <view class="footer-btn">
                <!-- 维修确认 -->
                <template v-if="navIndex == '0'">
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceDel')" @click="handleDelete(item)" text="删除"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceRej')" @click="handleReject(item)" text="驳回"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceEdit')" @click="handleEdit(item)" text="编辑"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceNext')" @click="handleComfirm(item)" text="确认"></u-button>
                </template>

                <!-- 待分配 -->
                <template v-if="navIndex == '1'">
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceDel')" @click="handleDelete(item)" text="删除"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceRej1')" @click="handleReject2(item)" text="驳回"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deivceServiceTrans')" @click="handleDispath(item)" text="分配"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceAccept1')" @click="handleService(item)" text="接单"></u-button>
                </template>

                <!-- 升级中 -->
                <template v-if="navIndex == '8'">
                    <u-button class="btn" type="primary" v-if="$has('deivceServiceTrans')" @click="handleDispath2(item)" text="分配"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceComplete')" @click="handleDone(item)" text="维修完成"></u-button>
                </template>

                <!-- 维修中 -->
                <template v-if="navIndex == '5'">
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceRej2')" @click="handleReject2(item)" text="驳回"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deivceServiceTrans')" @click="handleDispath2(item)" text="转单"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceComplete')" @click="handleDone(item)" text="维修完成"></u-button>
                </template>

                <!-- 待验收 -->
                <template v-if="navIndex == '6'">
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceRej2')" @click="handleReject2(item)" text="驳回"></u-button>
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceAccept')" @click="handleAccept(item)" text="验收"></u-button>
                </template>

                <!-- 已驳回 -->
                <template v-if="navIndex == '-1'">
                    <u-button class="btn" type="primary" v-if="$has('deviceServiceDel')" @click="handleDelete(item)" text="删除"></u-button>
                </template>
            </view>
        </view>
        <view class="loading animation-scale-up" v-if="loading"></view>
        <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
        <MyModal v-model="modalShow" :title="modalTitle" :content="modalContent" @confirm="modalConfirm"
            :showCancelButton="true" @cancel="modalShow = false"></MyModal>
    </scroll-view>
</template>

<script>
    import MyModal from "@/components/myModal";
    import MyUpload from "@/components/myUpload";
    import {
        setPageData,
        getUserInfo
    } from "@/store/user";
    import fetch from "@/utils/fetch";
    export default {
        components: {
            MyModal,
            MyUpload,
        },
        props: {
            data: {
                type: Array,
                default: [],
            },
            navIndex: {
                type: [Number, String],
                default: 1,
            },
            scrollNoData: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                loading: true,
                triggered: false,
                noData: false,

                modalShow: false,
                modalTitle: "",
                modalContent: "",
            };
        },
        onPullDownRefresh() {
            uni.stopPullDownRefresh();
        },
        methods: {
            // 删除
            handleDelete(item) {
                const that = this;
                this.modalShow = true;
                this.modalTitle = "提示";
                this.modalContent = "是否确认刪除?";
                this.modelFetchOption = {
                    method: 'get',
                    url: "/dms/deviceMaintenanceWorkOrder/delete",
                    params: {
                        id: item.id,
                    },
                    data: {},
                    success() {
                        that.$emit('onRefresh');
                    }
                };
            },
            // 驳回
            handleReject(item) {
                const that = this;
                this.modalShow = true;
                this.modalTitle = "提示";
                this.modalContent = "是否确认驳回?";
                this.modelFetchOption = {
                    method: 'get',
                    url: "/dms/workOrder/passOrRefuse",
                    params: {
                        id: item.id,
                        type: -1
                    },
                    data: {},
                    success() {
                        that.$emit('onRefresh');
                    }
                };
            },
            // 驳回2
            handleReject2(item) {
                this.toPath({
                    id: item.id,
                    desc: "驳回原因",
                    key: 'remark',
                    url: "/dms/deviceMaintenanceWorkOrder/reject",
                }, "/pages/device/maintenance-hall/reject");
            },
			
            // 编辑
            handleEdit(item) {
                this.toPath(item, '/pages/device/maintenance-apply/index?item=' + JSON.stringify(item))
            },
            // 确认
            handleComfirm(item) {
                const that = this;
                this.modalShow = true;
                this.modalTitle = "提示";
                this.modalContent = "是否将工单将流转至待分配?";
                this.modelFetchOption = {
                    method: 'get',
                    url: "/dms/workOrder/passOrRefuse",
                    params: {
                        id: item.id,
                        type: 1
                    },
                    data: {},
                    success() {
                        that.$emit('onRefresh');
                    }
                };
            },
            // 分配人员
            handleDispath(item) {
                this.toPath(item, "/pages/device/maintenance-hall/operator");
            },
            // 分配人员2
            handleDispath2(item) {
                this.toPath(item, "/pages/device/maintenance-hall/operator2");
            },
            // 接单 
            handleService(item) {
                const that = this;
                this.modalShow = true;
                this.modalTitle = "接单提醒";
                this.modalContent = "是否接单请确认!";
                this.modelFetchOption = {
                    method: 'get',
                    url: '/dms/deviceMaintenanceWorkOrder/receiveOrDistribution',
                    params: {
                        workOrderId: item.id,
                        userId: getUserInfo().userId,
                        workOrderStatus: item.workOrderStatus,
                        platform: 1,
                    },
                    data: {},
                    success() {
                        that.$emit('onRefresh');
                    }
                };
            },
            // 维修完成
            handleDone(item) {
                this.toPath(null, "/pages/device/maintenance-hall/repair-completed?id="+item.id+"&deviceMId="+item.deviceMId);
            },
            // 验收
            handleAccept(item) {
                this.toPath(item, "/pages/device/maintenance-hall/accept?id="+item.id);
            },
            //-----------------------------------------
            //公共方法
            toPath(data, path) {
                setPageData(data);
                uni.navigateTo({
                    url: path,
                    animationType: "pop-in",
                });
            },
            //公共方法
            modalConfirm() {
                const that = this;
                that.modalShow = false;
                that.$loading.open();
                fetch(that.modelFetchOption.method, that.modelFetchOption.url, that.modelFetchOption.data, that
                    .modelFetchOption.params).then((res) => {
                    uni.$emit("openToast", {
                        type: "success",
                        title: "操作成功",
                        complete() {
                            that.modelFetchOption.success.call();
                        },
                    });
                });
            },
            //公共方法
            onRefresh() {
                if (this._freshing) return;
                this._freshing = true;
                this.triggered = true;
                this.$emit("onRefresh");
                setTimeout(() => {
                    this.triggered = false;
                    this._freshing = false;
                }, 1000);
            },
            //公共方法
            scroll(e) {
                const that = this;
                if (!that.noData) {
                    this.loading = true;
                    this.$emit("scrollBottom", (val) => {
                        that.noData = val;
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    });
                }
            },
            //公共方法
            onRefresh() {
                if (this._freshing) return;
                this._freshing = true;
                this.triggered = true;
                this.$emit("onRefresh");
                setTimeout(() => {
                    this.triggered = false;
                    this._freshing = false;
                }, 1000);
            },
            //公共方法
            onRestore() {
                this.triggered = "restore"; // 需要重置
            },
        },
    };
</script>

<style lang="scss" scoped>
    .maintenance-hall-list {
        height: 100%;
        padding: 0 20rpx;

        .maintenance-hall-list-item {
            padding-top: 16rpx;
            background-color: #fff;
            box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
            margin-bottom: 20rpx;
            border-radius: 10px;
            overflow: hidden;

            .item-dt {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: 27rpx;

                .name {}

                .view {
                    color: #83b4ff;
                }

                .dt-l {
                    flex: 1;
                    margin-right: 10px;
                }

                .dt-r {
                    min-width: 70px;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    // border: 1px solid #e0e0e0;
                    // padding: 3px 5px;
                    // border-radius: 5px;
                    // color: #d7d4d4;
                    // font-size: 14px;
                }
            }

            .type-list {
                display: flex;
                flex-wrap: wrap;

                .type-list-item {
                    font-size: 14px;
                    padding: 3px 10px;
                    border: 1px solid #e0e0e0;
                    margin-right: 10px;
                    border-radius: 5px;
                    white-space: nowrap;
                    margin-bottom: 5px;
                }

                .color0 {
                    background-color: #f7cccc;
                    color: red;
                }
            }

            .header {
                padding: 0 30rpx 10px 30rpx;
                border-bottom: 1px solid #e0e0e0;
            }

            .main-box {
                padding: 20rpx 30rpx;
                border-bottom: 1px solid #e0e0e0;

                .item-dd {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    overflow: hidden;
                    margin-bottom: 22rpx;

                    .label {
                        margin-right: 20rpx;
                        font-size: 28rpx;
                        width: 120rpx;
                        min-width: 120rpx;
                    }

                    .value {
                        font-size: 28rpx;
                        flex: 1;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #666;
                    }

                    .btn {
                        width: 170rpx;
                        min-width: 170rpx;
                        margin-left: 29rpx;
                        height: 60rpx;
                        color: #fff;
                        font-size: 24rpx;
                    }
                }
            }
        }

        .img-box {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;

            img {
                width: 100px;
                margin: 0;
                margin-right: 27rpx;
                margin-bottom: 27rpx;
            }
        }

        .footer-btn {
            display: flex;
            padding: 20rpx;
            align-items: center;
            justify-content: flex-end;

            .btn {
                width: 80px;
                margin: 0;
                height: 32px;
                line-height: 32px;
                margin-right: 10rpx;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .scroll-no-data {
            text-align: center;
        }
    }
</style>